<template>
<div class="juheh5-select-login">
    <div class="account-header">已有账号登录</div>
    <div class="account-content">
        <div class="account-list">
            <div class="account-item" v-for="item in accountList" @click="handleAccountSelectClick(item)">
                <div class="item-content">
                    <div class="account-item-info">
                        <div class="account">{{ item.account }}</div>
                        <div class="last-login">上次登录{{ item.timeDiff }}前</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="other-account-login" @click="handleOtherAccountLoginClick">其他账号登录></div>
    </div>
</div>
</template>
<script>
import juheh5Service from '../../../services/juheh5Service';

export default {
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            myValue: this.modelValue,
            accountList: [],
            account: '',
            token: '',
        };
    },
    mounted() {
        this.getLocalStroageAccountList()
    },
    watch: {
        modelValue: {
            deep: true,
            handler(newVal) {
                this.myValue = newVal;
                this.curTab = newVal.currentComponentTab;
            },
        },
        myValue: {
            deep: true,
            handler(newVal) {
                this.handleSyncData();
            },
        },
    },
    methods: {
        getLocalStroageAccountList() {
            let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
            localAccountInfo.forEach(item => {
                let currentTime = Date.parse(new Date());
                item.timeDiff = this.timeFormat((currentTime / 1000 - item.last_login_time));
            });

            this.accountList = localAccountInfo.slice(0, 5);
            this.account = localAccountInfo[0].account;
            this.token = localAccountInfo[0].token;
        },
        handleAccountSelectClick(item) {
            this.account = item.account;
            this.token = item.token;
            this.handleLoginClick()
        },
        timeFormat(timeDiff) {
            if (timeDiff < 60) {
                return timeDiff.toString() + '秒';
            } else if (timeDiff >= 60 && timeDiff < 3600) {
                return parseInt(timeDiff / 60).toString() + '分钟';
            } else if (timeDiff >= 3600 && timeDiff < 86400) {
                return parseInt(timeDiff / 3600).toString() + '小时';
            } else {
                return parseInt(timeDiff / 86400).toString() + '天';
            }
        },
        handleLoginClick() {
            if (this.account !== '' && this.token !== '') {
                axios.post('/api/juheh5/account/token_login', {
                    account: this.account,
                    token: this.token,
                    game_id: this.myValue.gameId
                }).then(res => {
                    let data = res.data;
                    if (data.code != 0) {
                        layer.msg(data.msg, { time: 1000 });
                        return false;
                    }

                    let info = data.data;
                    let localAccountInfo = JSON.parse(localStorage.getItem('account_info')) || [];
                    localAccountInfo.forEach((item, index) => {
                        if (item.account === info.account) {
                            localAccountInfo.splice(index, 1);
                        }
                    });
                    localAccountInfo.unshift(info);
                    localStorage.setItem('account_info', JSON.stringify(localAccountInfo));

                    juheh5Service.loginCb(info)
                    return
                }).catch((error) => {
                    layer.msg(error, { time: 1000 });
                });
            } else {
                layer.msg('请选择登录账号', { time: 1000 });
            }

            return false;
        },
        handleOtherAccountLoginClick() {
            this.myValue.currentComponent = 'Login';
            this.myValue.currentComponentTab = 'PASSWORD_LOGIN';
        },
        handleSyncData() {
            this.$emit("update:modelValue", this.myValue);
        },
    },
};
</script>
